<template>
  <CustomNav title="拾光锦汉服体验店" url="appointmentSuccess"></CustomNav>
  <view class="container">
    <view class="content">
      <view class="success">
        <u-icon name="checkbox-mark" color="#F7F7F7" size="50"></u-icon>
      </view>
      <view class="submit">预约已提交</view>
      <view class="successText">您已成功提交预约申请</view>
      <view class="viewOrder" @click="handleViewOrder">查看订单</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import CustomNav from "@/components/CustomNav/index.vue";
import { previewImage } from "@/utils/tool";
import { shopInfo } from "@/api/index";

// 微信二维码
const WxQrcode = ref("");
const wx = ref("");

// 扫码
const handleScanCode = () => {
  previewImage(WxQrcode.value);
};

onMounted(async () => {
  const result = await shopInfo();

  WxQrcode.value = result.data.data.qrcode;
  wx.value = result.data.data.wx;
});

// 查看订单
const handleViewOrder = () => {
  uni.navigateTo({
    url: "/pagesA/viewOrder/index",
  });
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f7f7;

  .content {
    width: 550rpx;
    padding: 40rpx 55rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // box-shadow: 0 0 20rpx 3rpx #ccc;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 100rpx;

    .success {
      width: 140rpx;
      height: 140rpx;
      background-color: #07c160;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 40rpx 0 30rpx;
    }

    .submit {
      font-size: rpx;
      margin: 30rpx 0;
    }

    .successText {
      color: #9e9e9e;
      margin-top: 30rpx;
    }

    .viewOrder {
      display: inline-block;
      padding: 15rpx 50rpx;
      border-radius: 20rpx;
      color: #fff;
      font-size: 36rpx;
      background-color: $btn;
      border: 1px solid #ee9324;
      margin-top: 30rpx;
    }
  }
}
</style>
